<template>
  <view class="content">
    <view class="user_info">
      <!-- <AtAvatar class="head_img" image='https://jdc.jd.com/img/200'></AtAvatar> -->
      <image class="head_img" :src="userInfo.headimgurl" alt=""></image>
      <view>
        <view class="user_name"
          >{{ userInfo.real_name }} ({{ userInfo.mobile }})</view
        >
        <view class="balance">余额：{{ cardBalance }}</view>
      </view>
    </view>

    <view class="panel">
      <view class="box">
        <view class="tab"> 充值选项 </view>
        <view
          class="No_preferential"
          v-if="rechangeData == '' || rechangeData.rule.length == 0"
        >
          <!-- <img src="@public/img/pay/zanwuyouhui.png" alt /> -->
          <text>暂无充值项</text>
        </view>
        <view class="preferential" v-else>
          <view
            v-for="(item, index) in rechangeData.rule"
            :class="
              nowIdx == index
                ? 'rechangeItem rechangeItemActive'
                : 'rechangeItem'
            "
            :key="index"
            @tap="selectRechange(index)"
          >
            <view class="item item1">充{{ item.charge_money }}元</view>
            <view class="item item2">
              送{{ item.money_status != 0 ? item.money : 0 }}元
            </view>
          </view>
          <view class="detailsOption" v-if="rechangeData.rule.length != 0">
            {{
              rechangeData.rule[nowIdx].point_status != 0
                ? "赠送" + rechangeData.rule[nowIdx].point + "积分"
                : ""
            }}
            <view v-if="rechangeData.rule[nowIdx].coupon_status != 0">
              <view
                v-for="(item1, index) in rechangeData.rule[nowIdx].coupon_data"
                :key="index + 'c'"
              >
                {{ "赠送" + item1.couponNum + "张" + item1.title + "优惠券" }}
              </view>
            </view>
            <view
              v-if="
                rechangeData.rule[nowIdx].is_unify != 0 ||
                rechangeData.rule[nowIdx].newUnify.length != 0
              "
            >
              <view
                v-for="(item, index2) in rechangeData.rule[nowIdx].newUnify"
                :key="index2 + 'a'"
              >
                {{ "赠送" + item.name + "加油时优惠" + item.money + "元" }}
              </view>
            </view>
            <view
              v-if="
                rechangeData.rule[nowIdx].is_lock != 0 ||
                rechangeData.rule[nowIdx].newLock.length != 0
              "
            >
              <view
                v-for="(item, index3) in rechangeData.rule[nowIdx].newLock"
                :key="index3 + 'b'"
              >
                {{ "赠送" + item.name + "加油时每升油价" + item.money + "元" }}
              </view>
            </view>
          </view>
        </view>
        <AtAccordion
          :onClick="set_diyMoney"
          title="自定义金额"
          :open="diy_status"
          :icon="{ value: 'edit', color: '#77a1fd' }"
        >
          <AtList :hasBorder="false">
            <AtInput
              title="充值金额"
              type="number"
              placeholder="请输入充值金额"
              :value="save_money"
              :onChange="handleChange_save_money"
            />
            <AtInput
              title="赠送金额"
              type="number"
              placeholder="请输入赠送金额"
              :value="send_money"
              :onChange="handleChange_send_money"
            />
          </AtList>
        </AtAccordion>
        <view class="is_print">
          <AtCheckbox
            :options="checkboxOption"
            :selectedList="checkedList"
            :onChange="handleChangeCheck"
          />
        </view>
        <view class="bot-btn">
          <AtButton type="primary" class="goButton" @tap="goUserPay()">去支付</AtButton>
        </view>
      </view>
    </view>
    <AtToast
      :isOpened="showLoading"
      :text="'正在加载'"
      :duration="0"
      status="loading"
    ></AtToast>
  </view>
</template>

<script>
import "./option.scss";
import Taro from "@tarojs/taro";
import UserAPI from "../../api/user";
import Order from "../../api/order";
import { AtAccordion, AtInput } from "taro-ui-vue";

export default {
  components: {
    AtAccordion,
    AtInput,
  },
  data() {
    return {
      diy_status: false, // 展开自定义金额
      save_money: "", // 充值金额
      send_money: "", // 增加金额
      cardList: [],
      userInfo: {},
      checkboxOption: [
        { value: "1", label: "是否开票" },
        { value: "2", label: "是否使用自定义金额" },
      ],
      checkedList: ["1"],
      payList: ["1"],
      payment_code: [
        {
          id: "wxpay",
          name: "微信",
          icon: "iconfont icon_size iconweixinzhifu-dp color_wx",
          select: false,
        },
        {
          id: "alipay",
          name: "支付宝",
          icon: "iconfont icon_size iconzhifubao color_zfb",
          select: false,
        },
        {
          id: "cash",
          name: "现金",
          icon: "iconfont icon_size iconxianjin color_xj",
          select: false,
        },
        {
          id: "pos",
          name: "刷卡",
          icon: "iconfont icon_size iconfaka color_pos",
          select: false,
        },
      ],
      rechangeData: {
        rule: [
          {
            newUnify: [
              {
                name: "",
                money: "",
              },
            ],
            newLock: [
              {
                name: "",
                money: "",
              },
            ],
          },
        ],
      },
      nowIdx: 0,
      showLoading: true,
    };
  },
  mounted() {
    this.userInfo = Taro.getStorageSync("userInfor");
    let cardDetails = Taro.getStorageSync("choseCardDetails");
    this.cardBalance = cardDetails.balance;
    if (cardDetails) {
      // 获取充值项
      this.init(cardDetails);
    } else {
      Taro.redirectTo("/pages/recharge/choseUser");
    }
  },
  methods: {
    handleChange_save_money(val) {
      this.save_money = val;
    },
    handleChange_send_money(val) {
      this.send_money = val;
    },
    set_diyMoney(val) {
      this.diy_status = val;
    },
    go(val) {
      Taro.setStorageSync("choseCardDetails", val);
      Taro.navigateTo({
        url: "/pages/recharge/option",
      });
    },
    // 选择充值项
    selectRechange(index) {
      this.nowIdx = index;
      // this.$emit("sonChose", this.nowIdx);
    },
    goUserPay() {
      let charge_type = 1;
      if (this.checkedList.indexOf("2") > -1) charge_type = 0;
      var data = {
        mobile: this.userInfo.mobile,
        emp_id: Taro.getStorageSync("rechangeStaff"),
        type: Taro.getStorageSync("choseCardDetails").card_type,
        account_id: Taro.getStorageSync("choseCardDetails").id,
        recharge_id: this.rechangeData.id,
        key: this.nowIdx,
        charge_type,
        amount: this.save_money,
        money: this.send_money,
        receipt_id: this.checkedList.length,
      };
      console.log(JSON.stringify(data));
      var jsonData = JSON.stringify(data);
      window.javaInterface.payfromNative(jsonData);
    },
    init(val) {
      let data = {
        token: Taro.getStorageSync("token"),
        app_id: Taro.getStorageSync("app_id"),
        card_id: val.type_card_id,
        card_type: val.card_type, //油卡默认写死
        uid: this.userInfo.uid,
      };
      UserAPI.getOilCardsDetail(data).then((res) => {
        this.showLoading = false;
        if (res.code == 200) {
          this.rechangeData = res.data;
          // 每升减，锁油价
          this.rechangeData.rule.forEach((item) => {
            item.newUnify = [];
            if (Number(item.is_unify) == 1) {
              // 每升减
              // let cardData
              let cardIndex = item.liter_good_money.findIndex(
                (son) => son.id == val.type_card_id,
                console.log("val.type_card_id", val.type_card_id)
              );
              item.newUnify = item.liter_good_money[cardIndex].itemArr;
              console.log("cardIndex", cardIndex);
            }
            item.newLock = [];
            if (Number(item.is_lock) == "1") {
              // 每升减
              // let cardData
              let cardIndex = item.lock_good_money.findIndex(
                (son) => son.id == val.type_card_id
              );
              item.newLock = item.lock_good_money[cardIndex].itemArr;
              console.log("cardIndex", cardIndex);
            }
            let couponIds = item.coupon_ids ? item.coupon_ids.split(",") : []; //优惠券数组id
            if (item.coupon_status != 0) {
              item.coupon_data.forEach((son) => {
                son.couponNum = 0;
                couponIds.forEach((grandSon) => {
                  if (son.id == grandSon) son.couponNum += 1;
                });
              });
            }
          });
          this.parentOptionId = val.type_card_id;
        } else {
          this.rechangeData = "";
        }
      });
    },
    handleChangeCheck(val) {
      this.checkedList = val;
    },
    selectPayment(i) {
      this.payment_code.forEach((item, index) => {
        if (index == i) {
          item.select = true;
        } else {
          item.select = false;
        }
      });
    },
  },
};
</script>
